<template>
  <div class="chart" :class="{'active':isActive}" ref="chart" style="width: 40%; height: 300px"  @mouseover="hover" @mouseleave="unhover"></div>
</template>

<script>
export default {
  data() {
    return {
      isActive:false
    };
  },
  methods: {
    getEcharts() {
      const chart = this.$refs.chart;
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          title: {
            text: "报警类型分布",

            left: "10%",
            top: "4",
            textStyle: {
              fontSize: "16px",
              color:'#ccc'
            },
          },
          color:['#f8c60b','#f18c5c','#0d6da2','#b2907e','#5c4c30'],
          tooltip: {
            trigger: "item",
          },
          grid: {
            top:'50%',
            left: "100px",
         
          },
          legend: {
            orient: "vertical",
            bottom: "bottom",
            textStyle:{
              color:'#ccc',
              fontSize:'12px'
            }
          },
          series: [
            {
              name: "报警类型",
              type: "pie",
              radius: "70%",
              label: {
                normal: {
                  formatter: "{d}%",
                },
              },

              data: [
                { value: 1048, name: "水压" },
                { value: 735, name: "气压" },
                { value: 580, name: "烟火识别" },
                { value: 484, name: "有害气体" },
                { value: 300, name: "管道" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
    },
    autoResize() {
      this.$echarts.init(this.$refs.chart).resize()
    },
    hover(){
        this.isActive=true
        // alert(1)
    },
    unhover(){
        this.isActive=false
}
  },
  mounted() {
    this.getEcharts();
  },

    watch:{
    '$store.state.app.sidebar.opened':{
        handler:function(){
          setTimeout(() => {
        this.autoResize()
         console.log('我更新了1111');
          }, 300);
        },
        deep:true
   
    }
  }
  
};
</script>

<style scoped lang="less">
.chart {
  background: rgba(34, 40, 87,.4);
  border-radius: 20px;
  transition: all .5s;
}
.active{
    transform: translateY(-10px) translateX(-10px);
    box-shadow: 8px 8px 5px rgb(50, 104, 165);


}
</style>
